<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>登录</title>
    <link rel="stylesheet" href="../../master/css/basic.css">
    <style type="text/css">
        /*登录*/
        .logo-area{
            display: flex;
            width: 100%;
            height: 4rem;
        }
        .logo-img{
            display: block;
            width: 1.5rem;
            margin: auto;
        }
        .login-form-area{
            height: 5rem;
            width: 100%;
            position: relative;
        }
        .login-form{
            width: 90%;
            height: 100%;
            margin: auto;
            position: relative;
        }
        .name,.key{
            border-top: 0.5px solid #F2F2F2;
            border-right: 0.5px solid #F2F2F2;
            border-right: 0.5px solid #F2F2F2;
            border-bottom: 1px solid  #E0E0E0;
            -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.075);
            box-shadow: 0 0 0 1px rgba(0,0,0,.075);
            font-size: 0.28rem;
            display: block;
            width: 98%;
            background-color: white;
            height: 0.8rem;
            padding-left: 2%;
            outline: none;
        }
        .name{
            margin-bottom: 0.3rem;
        }
        .forget-pwd,.register-a{
            font-size: 0.28rem;
            color: #7A7A7A;
            border-radius: 0.1rem;
            padding: 0.1rem 0.15rem;
            border: 1px solid #ABABAB;
            margin-top: 0.3rem;
        }
        .forget-pwd{
            float: left;
        }
        .register-a{
            float: right;
        }
        .login-btn{
            height: 0.8rem;
            width: 40%;
            position: absolute;
            bottom: 0;
            left: 30%;
        }
        .submit-login{
            height: 100%;
            width: 100%;
            background-color:#F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
        /*登录end*/

    </style>
    <script src="../../master/lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>登录</li>
    </ul>
</div>
<!--主体-->
<div class="main-body-area">
    <div class="logo-area">
        <img class="logo-img" src="../img/logo.png">
    </div>
    <div class="login-form-area">
        <div class="login-form">
            <input type="text" class="name" placeholder="输入账号">
            <input type="password" class="key" placeholder="输入密码">
            <a class="forget-pwd" href="./forgetPwd.html">忘记密码</a>
            <a class="register-a" href="./register.html">立即注册</a>
            <div class="login-btn">
                <button class="submit-login">登录</button>
            </div>
        </div>
    </div>
</div>

<script src="../../master/lib/jquery/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        login();
    });
    function login(){
        $('.submit-login').click(function(){
            var phone = $('.name').val();
            var password = $('.key').val();
            if (phone.length>=1 && password.length>=6) { //todo 验证
                window.location.href = "#";
            }
            else{
                if(password.length == 0 || phone.length == 0) {
                    alert('请输入帐号和密码！！！');
                    return;
                }
                if(password.length<6){
                    alert('密码最少为6位');
                    return;
                }
            }
        })
    }
</script>
</body>
</html>